<!doctype html>
<html lang="en">
	<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css">

		<title>动态表格</title>
	</head>
	<body>
		<div id="app">
			<div class="container mt-5">
				<div class="row justify-content-center mb-2">
					<div class="col-8 ml-5">
						<input type="text" v-focus placeholder="员工编号" v-model="id" :disabled="flag">
						<input type="text" placeholder="员工姓名" v-model="name">
						<input type="button" value="添加" @click="add" :disabled="updateFlag">
					</div>
					<div class="col-8 text-right">
						<strong>员工人数:{{total}}</strong>
					</div>
				</div>
				 
				<div class="row justify-content-center">
					<div class="col-8">
						<table class="table table-striped table-bordered text-center">
							<tr>
								<th>编号</th>
								<th>姓名</th>
								<th>入职时间</th>
								<th>操作</th>
							</tr>
							<tr :key="item.id" v-for="item in emps">
								<td>{{item.id}}</td>
								<td>{{item.name}}</td>
								<td>{{item.date| format('yyyy-MM-dd')}}</td>
								<td>
									<!--@click.prevent表示阻止超链接的默认跳转-->
									<a href="" @click.prevent="delEmp(item.id)">删除</a>
									<span>|</span>
									<a href="" @click.prevent="toEdit(item.id)">修改</a>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>

		<!-- Optional JavaScript -->
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="js/jQuery/jquery-3.4.1.slim.min.js"></script>
		<script src="js/bootstrap/popper.min.js"></script>
		<script src="js/bootstrap/bootstrap.min.js"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			//自定义一个指令.获得焦点
			Vue.directive('focus',{
				inserted:function(el){
					el.focus();
				}
			});
			//定义过滤器处理日期的格式
			Vue.filter('format',function(value,pattern){
				function dateFormat(date, format) {
				    if (typeof date === "string") {
				        var mts = date.match(/(\/Date\((\d+)\)\/)/);
				        if (mts && mts.length >= 3) {
				            date = parseInt(mts[2]);
				        }
				    }
				    date = new Date(date);
				    if (!date || date.toUTCString() == "Invalid Date") {
				        return "";
				    }
				    var map = {
				        "M": date.getMonth() + 1, //月份 
				        "d": date.getDate(), //日 
				        "h": date.getHours(), //小时 
				        "m": date.getMinutes(), //分 
				        "s": date.getSeconds(), //秒 
				        "q": Math.floor((date.getMonth() + 3) / 3), //季度 
				        "S": date.getMilliseconds() //毫秒 
				    };
				
				    format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
				        var v = map[t];
				        if (v !== undefined) {
				            if (all.length > 1) {
				                v = '0' + v;
				                v = v.substr(v.length - 2);
				            }
				            return v;
				        } else if (t === 'y') {
				            return (date.getFullYear() + '').substr(4 - all.length);
				        }
				        return all;
				    });
				    return format;
				}
				return dateFormat(value,pattern);
			});
			
			let vm = new Vue({
				el: '#app',
				data: {
					id: '',
					name: '',
					flag: false,
					updateFlag:false,
					emps:[]
				},
				methods: {
					add: function() {
						if(this.flag){
							//表示需要更新数据
							//根据id值从emps中查询数据,然后对数据进行更新
							this.emps.some(item=>{
								if(item.id==this.id){
									//修改name值
									item.name=this.name;
									return true;//完成更新操作之后,终止循环
								}
							});
							//将id的文本框设置为可编辑状态
							this.flag=false;
						}else{
							//表示新增数据
							//声明一个新的员工数据
							let emp = {};
							emp.id = this.id;
							emp.name = this.name;
							emp.date = new Date();
							//将emp数据追加到数组emps中
							this.emps.push(emp);
						}
						//将输入框中数据设置为空
						this.id = '';
						this.name = '';
					},
					toEdit: function(id) {
						console.log(id);
						//将id的文本框设置为禁用
						this.flag=true;
						//1. 根据获得的id值,从emps中获得对应的数据
						//filter返回一个数组类型的结果
						let emp = this.emps.filter(item => item.id == id);
						console.log(emp);
						//2. 将获得数据填充到对应的文本框中
                        this.id=emp[0].id;
						this.name=emp[0].name;
					},
					delEmp:function(id){
						/* //1.1 根据id获得数据对应的下标
						let index=this.emps.findIndex(item=> item.id==id);
						//1.2 根据索引删除数据
						this.emps.splice(index,1); */
						
					    //方法2:使用数组的filter方法进行删除
						this.emps=this.emps.filter(item=> item.id!=id);
					}
				},
				computed:{
					//提供一个计算属性,统计员工的数量
					total:function(){
						return this.emps.length;
					}
				},
				mounted:function(){
					//生命周期的钩子:该函数执行时表示模板已经可以使用
					//通常在该函数中用于从后台获得数据
					let data=[{
							id: 1001,
							name: 'haoren',
							date: 1472828537000
						},
						{
							id: 1002,
							name: 'lucy',
							date: 1472828537000
						},
						{
							id: 1003,
							name: 'lily',
							date: 1472828537000
						},
						{
							id: 1004,
							name: 'jerry',
							date: 1472828537000
						}
					];
					this.emps=data;
				},
				watch:{
					name:function(val){
						//验证员工的名称是否已经存在
						let falg=this.emps.some(item=> item.name==val);
						this.updateFlag=falg;
					}
				}
			});
		</script>
	</body>
</html>
